<!--
 * @Date: 2021-10-18 16:42:12
 * @LastEditors: 邓春宜
 * @Desc: 
 * @LastEditTime: 2022-01-09 10:13:21
 * @FilePath: \web-ems\src\component\board\MainContainer.vue
--> 
<template>
  <div>
    <div class="body_main">
      <div class="fullbtn">
        <li v-if="flagFullBtn" @click="fullscreen">
          <FullscreenOutlined />全屏
        </li>
      </div>

      <div class="container_main">
        <!-- 背景固定 -->
        <div class="bg_index">
          <div class="map">
            <div class="map1"><img src="~images/lbx.png" /></div>
            <div class="map2"><img src="~images/jt.png" /></div>
            <div class="map3"><img src="~images/map.png" /></div>
          </div>
        </div>
        <!-- 背景固定 -->

        <!-- 内容 -->
        <div class="board_con">
          <!-- 标题 begin-->
          <div class="board_title">
            <span class="board_logo color_w">
              <img
                :src="baselogo"
                style="height: 38px; padding-left: 10px"
              />
              {{basetitle}}
            </span>
            <h1>{{ title }}</h1>
            <span class="board_time color_w"
              ><ClockCircleOutlined />&nbsp;<span> {{ date }}</span
              >&nbsp;&nbsp;</span
            >
          </div>
          <div class="loading" v-if="$store.state.LoadingStatus">
            <a-spin size="large" />
            <p>正在加载中……</p>
          </div>
          <div v-if="!$store.state.LoadingStatus" class="content-box">
            <slot name="content-box"></slot>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  ClockCircleOutlined,
  FullscreenOutlined,
  ImportOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
} from "@ant-design/icons-vue";
import { reactive, toRefs , ref, onUnmounted, onMounted } from "vue";
import "@/assets/css/kanban.less";
import { useRoute, useRouter } from "vue-router"; 
import { base } from "@/core/api/module/board";
export default {
  components: {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    ClockCircleOutlined,
    FullscreenOutlined,
    ImportOutlined,
  },
  name: "MainContainer",
  props: {
    title: String,
  },
  setup() {
    const state = reactive({
      screenWidth: document.body.clientWidth,
      date: new Date(),
      flagFullBtn: true,
      flagExit: true,
      showmenu: false,
      baselogo: "",
      basetitle: "",
      timer:false
    });

    const router = useRouter();
    const $route = useRoute();
    const fullscreen = () => {
      let el = document.querySelector(".body_main");
      let rfs =
          el.requestFullScreen ||
          el.webkitRequestFullScreen ||
          el.mozRequestFullScreen ||
          el.msRequestFullScreen,
        wscript;
      if (typeof rfs != "undefined" && rfs) {
        rfs.call(el);
        return;
      }
      if (typeof window.ActiveXObject != "undefined") {
        wscript = new ActiveXObject("WScript.Shell");
        if (wscript) {
          wscript.SendKeys("{F11}");
        }
      }
    };
    const exit = () => {
      router.push("/");
    };

    onMounted(async () => {
      const {data}  = await base({}); 
      state.baselogo = data.logo
      state.basetitle = data.title
      if ($route.name == "Index") {
        state.flagExit = false;
      } 
      state.timer = setInterval(function () {
        state.date = new Date().toLocaleString();
      });
      let c_width = document.documentElement.clientWidth;
      let c_height = document.documentElement.clientHeight;
      let zoom_W = c_width / 1920;
      let zoom_H = c_height / 1080;
      let zoom_act = zoom_W > zoom_H ? zoom_H : zoom_W;
      document.querySelector(".container_main").style.zoom = zoom_act;

      window.onresize = () => {
        c_width = document.documentElement.clientWidth;
        c_height = document.documentElement.clientHeight;
        zoom_W = c_width / 1920;
        zoom_H = c_height / 1080;
        zoom_act = zoom_W > zoom_H ? zoom_H : zoom_W;
        document.querySelector(".container_main").style.zoom = zoom_act;

        if (
          document.fullscreenElement ||
          document.msFullscreenElement ||
          document.mozFullScreenElement ||
          document.webkitFullscreenElement ||
          false
        ) {
          state.flagFullBtn = false;
        } else {
          state.flagFullBtn = true;
        }
      };
    });

    onUnmounted(() => {
      if (state.timer) {
        clearInterval(state.timer);
      }
    });

    return {
      ...toRefs(state),
      exit,
      fullscreen,
    };
  },
};
</script>

<style lang="css" scoped>
.blurblack {
  position: fixed;
  z-index: 99998;
  width: 100%;
  height: 100%;
  background: rgb(5, 5, 5, 0.1);
}
.loading {
  text-align: center;
  color: rgb(94, 145, 255);
  font-size: 20px;
  padding: 400px 0 0 0;
}
.title1 {
  font-size: 20px;
  color: rgb(22, 183, 211);
  border-left: 3px solid rgb(22, 183, 211);
  padding-left: 10px;
  margin: 10px;
}
.menu_in {
  width: 640px;
  right: 0;
  height: calc(100% - 50px);
  bottom: 50px;
  background: rgba(4, 3, 56, 0.9);
  position: fixed;
  z-index: 99999;
  overflow-y: scroll;
  box-shadow: -4px 4px 10px #0db2ff2c;
}

.menuli {
  box-sizing: border-box;
  border: 1px solid #6dcffd;
  display: inline-block;
  text-align: center;
  margin: 5px;
  padding: 5px;
  background: rgba(46, 77, 253, 0.15);
  border-radius: 5px;
  width: 200px;
}
.menuli h1 {
  color: #a6def8;
  text-shadow: 3px 3px 8px springgreen;
  font-size: 18px;
}
.menuli:hover {
  border: 1px solid #dcf4ff;
  background: rgba(46, 77, 253, 0.3);
}
.menuli img {
  width: 100%;
  height: 100px;
}
</style> 